<template>
  <div class="tab-box">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="navbar-in"
      @click="handleTabChange(item, index)"
    >
      <div
        :style="{
          backgroundColor:
            currentNavbar === item.url ? componentData.activeColor : componentData.defaultColor,
        }"
        class="icon-box"
      >
        <img
          :src="item.icon.url"
          alt="solution"
          :style="{
            filter: `drop-shadow(${
              currentNavbar === item.url ? '#fff' : componentData.activeColor
            } 100px 0)`,
          }"
        />
      </div>
      <span class="ft-22 ft-bold">{{ item[`title${capitalizeLang}`] }}</span>
      <el-tooltip class="item" effect="dark" placement="top">
        <div slot="content" class="tip-content">{{ item[`subtitle${capitalizeLang}`] }}</div>
        <span class="ft-16">{{ item[`subtitle${capitalizeLang}`] }}</span>
      </el-tooltip>
    </div>
    <div
      v-if="componentData.list.length > 6"
      key="more"
      class="navbar-in"
      @click="hasMore = !hasMore"
    >
      <div class="icon-box active">
        <img src="@/assets/images/tab-more.png" alt="solution" class="more" />
      </div>
      <span class="ft-22 ft-bold">{{ hasMore ? '返回' : '更多解决方案' }}</span>
      <div class="right-box">
        <i v-if="hasMore" class="el-icon-back"></i>
        <i v-else class="el-icon-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      currentNavbar: 0,
      hasMore: false,
    }
  },
  computed: {
    ...mapGetters(['capitalizeLang']),
    list() {
      const listLength = this.componentData.list.length
      if (listLength <= 6) {
        return this.componentData.list.slice(0, 6)
      }

      if (this.hasMore) {
        return this.componentData.list.slice(5, listLength)
      }
      return this.componentData.list.slice(0, 5)
    },
  },
  watch: {
    '$route.query': {
      immediate: true,
      handler(val) {
        if (val.id) {
          const listLength = this.componentData.list.length
          const index = this.componentData.list.findIndex((item) => +item.url === +val.id)
          // 判断是否翻页了
          if (listLength > 6 && index > 4) {
            this.hasMore = true
          }
          this.currentNavbar = val.id
        }
      },
    },
  },
  methods: {
    handleTabChange(item) {
      if (!item.url) {
        return
      }
      this.currentNavbar = item.url

      this.$router.push({
        path: '/solution',
        query: {
          id: item.url,
          type: item.classificationType,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.tab-box {
  .width(1200);
  .pd(110, 0, 80, 0);

  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

  .navbar-in {
    .width(380);
    .height(320);
    .pd(60, 30, 0, 30);
    .mg(0, 0, 30, 0);

    &:nth-child(3n + 2) {
      .mg(0, 26, 30, 26);
    }

    align-items: center;
    display: flex;
    flex-direction: column;
    background: #fff;
    cursor: pointer;
    box-shadow: 1px 3px 16px rgba(7, 98, 203, 0.16);

    .right-box {
      .width(120);
      .height(32);
      .lineH(32);
      .ft(24);
      .mg(10, 0, 0, 0);

      background: #0762cb;
      border-radius: 16px;
      color: #fff;
      text-align: center;
    }

    .icon-box {
      .width(78);
      .height(78);

      border-radius: 50%;
      background-color: #eef6fe;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        .width(40);
        .height(40);

        filter: drop-shadow(#0261bc 100px 0);
        transform: translateX(-100px);
      }

      &.active {
        img {
          .width(78);
          .height(78);

          filter: drop-shadow(transparent 0 0);
          transform: translateX(0);
        }
      }
    }

    .ft-22 {
      .ft(22);
      .lineH(22);
      .mg(40, 0, 16, 0);

      text-align: center;
    }

    .ft-16 {
      .ft(16);
      .lineH(20);

      word-break: break-word;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      text-align: center;
    }
  }
}

.tip-content {
  .maxWidth(500);
}
</style>
